react-dom

What is react-dom?

The react-dom package provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements in response to data changes. It is a companion package to React that facilitates rendering components to the DOM and interacting with the DOM tree.

What are react-dom's main functionalities?

Rendering React Elements

This feature allows you to render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Component Lifecycle Management

react-dom manages the lifecycle of components, including mounting, updating, and unmounting components.

class MyComponent extends React.Component {
  componentDidMount() {
    // Code to run when the component is mounted
  }

  componentWillUnmount() {
    // Code to run before the component is unmounted and destroyed
  }
}

Handling Events

react-dom provides a synthetic event system that wraps the native event system, providing a cross-browser interface to native events.

function MyComponent() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

Server-side Rendering

react-dom/server provides methods for rendering components to static markup (typically used on the server) such as renderToString and renderToStaticMarkup.

ReactDOMServer.renderToString(
  <MyComponent />
);

Portals

Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

ReactDOM.createPortal(
  child,
  container
);

Other packages similar to react-dom

preact

Preact is a fast 3kB alternative to React with the same modern API. It provides similar functionalities for rendering UIs but with a smaller footprint, making it a good choice for performance-sensitive applications.

inferno

Inferno is an extremely fast, React-like library for building high-performance user interfaces on both the client and server. It offers a similar component-based UI building experience but focuses on performance optimizations.

vue-server-renderer

This package is part of the Vue ecosystem and provides server-side rendering capabilities similar to react-dom/server. It's used to render Vue components on the server and send the static markup to the client.

README

react-dom

This package serves as the entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React, which will be shipped as react to npm.

Installation

npm install react react-dom

Usage

In the browser

var React = require('react');
var ReactDOM = require('react-dom');

class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

ReactDOM.render(<MyComponent />, node);

On the server

var React = require('react');
var ReactDOMServer = require('react-dom/server');

class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

ReactDOMServer.renderToString(<MyComponent />);

API

react-dom

• findDOMNode
• render
• unmountComponentAtNode

react-dom/server

• renderToString
• renderToStaticMarkup

Changelog

15.7.0 (October 14, 2020)

React

• Backport support for the new JSX transform to 15.x. (@lunaruan in #18299 and @gaearon in #20024)